<template>
	<view>
		<view class="hot-place">
			<view class="tag-text u-flex justify-between u-padding-20">
				<text class="u-font-xl" style="font-weight: 800;">当季热门</text><text class="more"></text>
			</view>
			<!-- <view class="city-list u-flex  u-padding-20 justify-between">
				<view v-for="(item,index) in citylist" class="u-flex-col justify-center align-center"
					style="width: 25%;">
					<u-image @click="logoTap(item)" border-radius="10" width="80upx" height="80upx"
						:src="item.app_cover_url" :key="index">
					</u-image>
					<view class="">
						{{item.city_name}}
					</view>
				</view>
			</view> -->

			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item,index) in citylistHot">
					<image @click="logoTap(item)" style="width:80upx; height:80upx; border-radius: 15upx;"
						:src="item.app_cover_url" :key="index">
					</image>
					<view class="">
						{{item.city_name}}
					</view>
				</u-grid-item>

			</u-grid>
		</view>

		<view class="city-list u-flex-col u-padding-20 justify-between bg-white">
			<view v-for="(item,index) in citylist" style="position: relative; margin-top: 20upx;">
				<image @click="logoTap(item)" style="width:690upx; height:280upx;border-radius: 15upx;"
					:src="item.cover_url" :key="index">
				</image>
				<view class="test_demo" style="position: absolute; 
					  top: 25upx; 
					  padding: 0 25upx; 
					  left: -10upx;  
					  color: black; 
					  border-radius: 15upx;
					  background-color: rgb(254, 239, 73);">{{item.count}}个景点</view>
				<text style="position: absolute; 
				bottom: 25upx;  
				left: 45upx; 
				color: white;font-size: 16px;
				font-weight: 500;">{{item.city_name}}</text>
			</view>
		</view>
		<page-tabpars></page-tabpars>
	</view>
</template>

<script>
	import citys from '../../data/city.json'
	import alldata from '../../data/alldata.json'
	export default {
		data() {
			return {
				citylistHot: [],
				citylist: []
			}
		},
		onShow() {
			this.$u.vuex('active', 'china')
		},
		onLoad() {
			this.citylistHot = citys.filter(v => v.is_hot == 1)
			citys.filter(v => v.is_hot == 0).forEach(item => {
				let countList = alldata.filter(r => r.id_city == item.uuid)
				this.citylist.push(Object.assign(item, {
					count: countList.length
				}))
			})

		},
		methods: {
			logoTap(item) {

				uni.navigateTo({
					url: `/pages/listPage/listPage?cityId=${item.uuid}&title=${item.city_name}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.hot-place {
		width: 100%;
		background-color: #FFFFFF;

	}
</style>
